<template>
  <n-grid :col="24" x-gap="10">
    <n-grid-item span="24">
      <n-card>
        <BasicInfo :inventory-item="inventoryItem" />
        <div class="py-2">
          <VariantTransactionLogs :inventoryId="props.id" :variantId="variant.id" />
        </div>
      </n-card>
    </n-grid-item>
  </n-grid>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { get } from "lodash-es";
import { InventoryDetailVO } from "@/types/model/inventory/vos/inventory.vo";
import VariantTransactionLogs from "@/components/biz/variantTransaction/index.vue";
import BasicInfo from "./basicInfo.vue";
interface IProps {
  inventoryDetail: InventoryDetailVO;
  id: number | string;
}

const props = withDefaults(defineProps<IProps>(), {});

const inventoryItem = computed(() => {
  return get(props.inventoryDetail, "inventoryItem") || {};
});

const variant = computed(() => {
  return get(props.inventoryDetail, "variants") || {};
});
</script>
